<template>
  <el-upload
    class="single-uploader"
    v-model:file-list="fileList as any"
    list-type="picture-card"
    :limit="limitValue"
    :class="[fileList.length >= limitValue ? 'hideUploader' : 'showUploader']"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :action="uploadURL"
    :on-success="handelSuccess"
    :before-upload="handleBeforeUpload"
    accept="image/jpeg,image/jpeg,image/png"
  >
    <el-icon class="single-uploader-icon">
      <Plus/>
    </el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <div style="width: 100%;height: 100%;">
      <img :src="dialogImageUrl" style="width: 100%;height: 100%;" alt="Preview Image"/>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref, watch} from "vue";
import {ElNotification, UploadFile, UploadRawFile} from "element-plus";
import app from "@/constants/app";
import {getToken} from "@/utils/cache";

const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const fileList = ref([]) as any;

const handleRemove = (file: UploadFile) => {
  let src = [];
  for (let i = 0; i < fileList.value.length; i++) {
    src.push(fileList.value[i].response.data.src);
  }
  emit("update:modelValue", src.join(","));
};

const handlePictureCardPreview = (uploadFile: any) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const uploadURL = `${app.api}/sys/oss/upload?token=${getToken()}`;

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  limitValue: {
    type: Number,
    default: 1
  },
  update: {
    type: Number
  }
});

fileList.value = [];

if (props.modelValue) {
  let str = props.modelValue;
  let arr = str.split(",");
  for (let i = 0; i < arr.length; i++) {
    fileList.value.push({name: "str", url: "https://" + arr[i]});
  }
}

watch(() => props.update, () => {
  console.log("1111", props.update, props.modelValue);
  fileList.value = [];
  if (props.modelValue) {
    let str = props.modelValue;
    let arr = str.split(",");
    for (let i = 0; i < arr.length; i++) {
      fileList.value.push({name: "str", url: "https://" + arr[i]});
    }
  }
})

const handelSuccess = () => {
  let src = [];
  for (let i = 0; i < fileList.value.length; i++) {
    // @ts-ignore
    src.push(fileList.value[i].response.data.src);
  }
  emit("update:modelValue", src.join(","));
};

/**
 * 限制用户上传文件的格式和大小
 */
function handleBeforeUpload(file: UploadRawFile) {
  const fileSize = 2 * 1048 * 1048;
  const imgSize = file.size / 1024 / 1024 < fileSize;
  const imgType = ["image/jpg", "image/jpeg", "image/png"];
  if (!imgType.includes(file.type))
    ElNotification({
      title: "温馨提示",
      message: "上传图片必须是 JPG/JPEG/PNG 格式！",
      type: "warning"
    });
  if (!imgSize)
    ElNotification({
      title: "温馨提示",
      message: `上传图片大小不能超过 ${fileSize}MB！`,
      type: "warning"
    });
  return imgType.includes(file.type) && imgSize;
}
</script>

<style scoped lang="less">
.single-uploader .single {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.hideUploader {
  :deep(.el-upload) {
    display: none;
  }
}
</style>

<style>
.single-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.single-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.single-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
